<template>
  <view class="router-view bcl-active">
    <view class="container">
      <!-- 银行卡绑定 -->
      <!-- <view class="container bcl-white radius shadow pay-bind box mb-15">
				<view class="icon">
					<image src="/static/images/bank_icon.png" class="width height block" />
				</view>
				
				<view class="pay-content box-1 ml-10 mt-5">
					<view class="fz-18 bold">银行卡绑定</view>
					<view class="cl-second mt-5 mb-5">平台会向银行卡打入一定的金额,输入该 金额进行绑定</view>
					<navigator url="/user/setting/binding/bank">
						<button class="uni-button uni-button-radius mt-15">立即绑定</button>
					</navigator>
				</view>
			</view> -->

      <!-- 支付宝绑定 -->
      <view
        class="container bcl-white radius shadow pay-bind box mb-15"
        v-for="(item, index) in alipayList"
        :key="index"
      >
        <view class="icon">
          <image
            src="/static/images/alipay_icon.png"
            class="width height block"
          />
        </view>

        <view class="pay-content box-1 ml-10 mt-5">
          <view class="fz-18 bold">{{ item.alipay_name }}</view>
          <view class="cl-second mt-5 mb-5"
            >支付宝认证会在1日内完成
            <text class="cl-main ml-5"
              >({{ item.status | stateType }})</text
            ></view
          >
          <navigator
            :url="
              `/user/setting/binding/alipay?status=${item.status}&id=${item.id}`
            "
            v-if="item.status != 2 && item.status != 3"
          >
            <button class="uni-button uni-button-radius mt-15">立即绑定</button>
          </navigator>
        </view>
      </view>

      <view class="mt-50 tips pb-50">
        <view class="bold">友情提示</view>
        <view class="content mt-15 cl-second"
          >以下账户信息以您提交的信息为准,非本站金融体系,请妥善填写,如出现信息误差,自行负责.如对支付认证有任何疑问,请直接联系客服.</view
        >
      </view>
    </view>

    <!-- 绑定成功 -->
    <view v-if="addAccountModal">
      <uni-dialog
        v-model="addAccountModal"
        :showClose="false"
        @submit="addAccount"
      >
        <view slot="content">
          <view class="text-center middle">
            <text class="icon icon-success cl-main fz-24"></text>
            <text class="bold fz-16">添加支付宝账号</text>
          </view>

          <view class="mt-15">
            <view class="fz-15 bold mb-15">支付宝姓名</view>

            <view class="uni-input">
              <input
                type="text"
                placeholder="请输入您的支付宝姓名"
                :focus="true"
                v-model="accountName"
              />
            </view>
          </view>

          <view>
            <view class="fz-15 bold mb-15">支付宝账号</view>

            <view class="uni-input">
              <input
                type="text"
                placeholder="请输入您的支付宝账号"
                v-model="account"
              />
            </view>
          </view>
        </view>
      </uni-dialog>
    </view>

    <!-- 提交 -->
    <view
      class="uni-footer bcl-main-new cl-white text-center pointer pointer-filter"
      @tap="addAccountModal = true"
      >添加支付宝账号</view
    >
  </view>
</template>

<script>
import { alipayList, addAlipay } from "@/apis/user";
import uniDialog from "@/components/dialog";

export default {
  data() {
    return {
      alipayList: [],
      addAccountModal: false,
      accountName: "",
      account: "",
    };
  },

  filters: {
    stateType(val) {
      let text = {
        1: "已打款，等待认证",
        2: "认证成功",
        3: "认证失败",
      };
      if (val) return text[val];
      else return "正在审核中";
    },
  },

  components: {
    uniDialog,
  },

  onShow() {
    this.getAlipayList();
  },

  methods: {
    /**
     * 获取支付宝列表
     */
    async getAlipayList() {
      let { code, data } = await alipayList();
      if (code === 200) this.alipayList = data;
    },

    /**
     * 添加支付宝账号
     */
    async addAccount() {
      if (!this.accountName || !this.account)
        return this.$toast("请输入支付宝姓名和账号");
      let params = {
        alipay_name: this.accountName,
        alipay_account: this.account,
      };
      let { code } = await addAlipay(params);
      if (code === 200) {
        this.$toast("添加支付宝账号成功，请等待审核");
        this.accountName = "";
        this.account = "";
        this.addAccountModal = false;
        this.getAlipayList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  .pay-bind {
    .icon {
      width: 100upx;
      height: 100upx;
    }
  }
}
</style>
